import React, {PropsWithChildren} from 'react'
import {ConfigProvider, Divider, Grid} from "@nutui/nutui-react-taro";
import QiniuImageUploader from "./QiniuImageUploader";

export interface InvoiceUploadAreaProps extends PropsWithChildren {
    invoicePicture?: string
    unionPayInvoicePicture?: string
    onInvoicePictureChange: (front: string) => void
    onUnionPayInvoicePictureChange: (back: string) => void
}

const InvoiceUploadArea: React.FC<InvoiceUploadAreaProps> = (props) => {
    return <>
        <Divider>小票</Divider>
        <ConfigProvider theme={{nutuiUploaderImageWidth: "120px", nutuiUploaderImageHeight: "280px"}}>
            <Grid columns={2}>
                <Grid.Item>
                    <QiniuImageUploader label="购物小票"
                                        value={props.invoicePicture ? [props.invoicePicture] : []}
                                        onChange={v => props.onInvoicePictureChange(v[0])}/>
                </Grid.Item>
                <Grid.Item>
                    <QiniuImageUploader label="银联小票"
                                        value={props.unionPayInvoicePicture ? [props.unionPayInvoicePicture] : []}
                                        onChange={v => props.onUnionPayInvoicePictureChange(v[0])}/>
                </Grid.Item>
            </Grid>
        </ConfigProvider>
    </>
}

export default InvoiceUploadArea


